    .deviceChart {
        .value-unit-text {
            font-size: 8px;
        }
    }
    
    .devidce-online {
        .value-text {
            color: #25990e;
        }
        .parames-value-color {
            color: #25990e;
            &.red {
                color: red;
            }
        }
    }
    
    ion-grid {
        margin: 0;
    }
    
    .device-status {
        text-align: center;
        font-size: 14px;
        margin: 5px 0 12px 0;
        &.slow {
            margin: 5px 0 6px 0;
        }
    }
    
    .value-label-text {
        font-size: 32px;
    }
    
    .value-text {
        font-size: 36px !important;
        color: #777;
    }
    
    .device-monitor-out-circle {
        stroke: #dee7ef !important;
    }
    
    .demo-chart {
        height: 134px;
    }
    
    .buttonThree-dt {
        .button {
            height: 40px;
            border-radius: 0 !important;
            border: 0;
            border-top: 1px solid #d9dee2;
            border-right: 1px solid #d9dee2;
            background: #f2f5f8;
            color: #999;
            line-height: 30px;
            text-align: center;
        }
        .button.activated {
            background-color: #f2f5f8;
            color: #999 !important;
        }
        .button.chosen {
            background-color: #e6eaed;
            color: #222;
        }
    }
    
    @media screen and (max-width: 340px) {
        .buttonThree-dt .button {
            height: 35px;
            min-height: 35px;
            line-height: 35px;
        }
    }
    
    ion-card {
        padding: 4px 0 2px 0px !important;
        margin: 5px 0px 5px 0px !important;
        width: 100% !important;
        box-shadow: none !important;
        border: 1px solid #D9DEE2;
        background: none !important;
    }
    
    .parameter-name {
        color: #777;
        font-size: 12px;
    }
    
    .parames-value-color {
        color: #777;
        font-size: 14px;
        line-height: 10px;
        margin: 2px 0;
        &.red {
            color: red;
        }
    }
    
    .show-parameter-area {
        flex: 1;
        padding: 0;
        overflow-y: scroll;
    }
    
    .chart-left {
        max-width: 30%;
        .parames-value-color {
            text-align: left;
        }
    }
    
    .chart-right {
        max-width: 30%;
        .parames-value-color {
            text-align: right;
        }
        .parameter-name {
            text-align: right;
        }
    }
    
    .chart-circle {
        position: relative;
        border: 1px solid;
        border-color: #DEE7EF;
        border-radius: 50%;
        margin: auto;
        text-align: center;
        width: 154px;
        height: 154px;
        &>img {
            position: absolute;
            width: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }